<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <!--标题行-->
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3"><h1 class="text-center">用户列表</h1></div>
        </div>
        <!--数据行-->
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <!--添加按钮-->
                <a href="javascript:;" class="btn btn-success btn-sm" @click.prevent="restUserData">添加</a>
                <table class="table table-striped table-bordered">
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>工资</th>
                        <th>年龄</th>
                        <th>简介</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="e in employees">
                        <td>{{e.id}}</td>
                        <td>{{e.name}}</td>
                        <td>{{e.salary}}</td>
                        <td>{{e.age}}</td>
                        <td>{{e.desc}}</td>
                        <td>
                            <a class="btn btn-danger btn-sm" href="javascript:;" @click="deleteEmployee(e.id)">删除</a>
                            <a href="javascript:;" class="btn btn-info btn-sm" @click="editEmployee(e)">修改</a>
                        </td>
                    </tr>
                </table>

                <!--添加和修改表单-->
                <form>
                    <div class="form-group">
                        <!--有id就展示-->
                        <label class="control-label" v-show="employee.id">编号</label>
                        <div>
                            <p class="form-control-static">{{employee.id}}</p>
                            <input type="hidden" v-model="employee.id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" v-model="employee.name" id="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="salary">工资</label>
                        <input type="text" class="form-control" v-model="employee.salary" id="salary" placeholder="工资">
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" v-model="employee.age" id="age" placeholder="年龄">
                    </div>
                    <div class="form-group">
                        <label for="desc">个人简介</label>
                        <input type="text" class="form-control" v-model="employee.desc" id="desc" placeholder="个人简介">
                    </div>
                    <button type="submit" class="btn btn-block btn-info" @click="saveOrUpdate">提交</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../vue.js"></script>
<script src="../axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            employees: [],
            /*name: "",
            age: 0,
            salary: 0.0,
            desc: "",*/
            //这个是上面分散的参数的简化写法
            employee: {}
        },
        methods: {
            //添加数据
            saveOrUpdate() {
                axios.post('http://localhost:8989/saveOrUpdate', this.employee /*{name: this.name, age: this.age, salary: this.salary, desc: this.desc}*/).then(res => {
                    alert("用户信息更新成功");
                    //axios.get('http://localhost:8989/emp').then(response => this.employees = response.data);
                }).catch(err => {
                    alert("用户信息更新失败");
                })
            },
            //修改数据
            editEmployee(emp) {
                this.employee = emp;
            },

            deleteEmployee(id) {
                if (confirm("您确定要删除这条记录吗")) {
                    axios.post('http://localhost:8989/del/' + id).then(response => {
                        this.employees = response.data;
                        axios.get('http://localhost:8989/emp').then(response => this.employees = response.data);
                    })
                }

            },
            restUserData() {
                this.employee = [];
            }
        },
        computed: {},
        created() {
            //=> 箭头函数内部没有自己的this   function(){} 有自己的this 所以用this.users = response.data前端不会显示数据
            axios.get('http://localhost:8989/emp').then(response => this.employees = response.data)
        },
        update() {
            axios.get('http://localhost:8989/emp').then(response => this.employees = response.data);
        }
    })
</script>